<template>
  <div>
    <div>
      <table id="styled-table">
        <tr>
          <td style="width: 200px">
            <span>{{ dataList.PlanNumber }}</span>
          </td>
          <td>
            <span>{{ from.num }}</span>
          </td>
          <td style="width: 200px">
            <span>{{ dataList.PlanName }}</span>
          </td>
          <td>
            <span>{{ from.name }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span>{{ dataList.CalibrationProcedure }}</span>
          </td>
          <td>
            <span>{{ from.calibrationNum }}</span>
          </td>
          <td>
            <span>{{ dataList.Status }}</span>
          </td>
          <td>
            <span>{{ from.statusName }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span>{{ dataList.Creator }}</span>
          </td>
          <td>
            <span>{{ from.creatorName }}</span>
          </td>
          <td>
            <span>{{ dataList.CreateTime }}</span>
          </td>
          <td>
            <span>{{ from.createTime }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span>{{ dataList.PlanendDate }}</span>
          </td>
          <td>
            <span>{{ formatTime(from.endDate) }}</span>
          </td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <br />
      <el-table
        :data="listData"
        element-loading-text="Loading"
        height="430"
        fit
        highlight-current-row
      >
        <el-table-column :label="dataList.DeviceNumber">
          <template slot-scope="scope">
            {{ scope.row.deviceNum }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <template slot-scope="scope">
            {{ scope.row.deviceName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSpecifications">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.CalibrationPlanDate">
          <template slot-scope="scope">
            {{
              scope.row.isCalibration == 0
                ? "/"
                : formatTime(scope.row.calibrationPlanDate)
            }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Week">
          <template slot-scope="scope">
            {{
              scope.row.isCalibration == 0
                ? "/"
                : scope.row.cycle + scope.row.cycleName
            }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DevicePersonResponsibleId">
          <template slot-scope="scope">
            {{ scope.row.personResponsibleName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Devicedepart">
          <template slot-scope="scope">
            {{ scope.row.departName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.CalibrationPersonName">
          <template slot-scope="scope">
            {{ scope.row.calibrationPersonName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.IsCalibrationName">
          <template slot-scope="scope">
            <span v-if="scope.row.isCalibration == 0" style="color: red">
              {{ scope.row.isCalibrationName }}
            </span>
            <span v-else>
              {{ scope.row.isCalibrationName }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { get } from "../../../api/DeviceCalibrationPlan.js";
import { formatTime } from "../../../utils/time";
export default {
  name: "DeviceCalibrationPlanView",
  props: {
    id: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      formatTime,
      listData: [],
      loading: false,
      from: {
        num: "",
        name: "",
        preparedName: "",
        preparedDate: "",
        remark: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      get({ id: this.id }).then((res) => {
        this.from = res.data;
        this.listData = res.data.deviceCalibrationPlanInfos;
      });
    },
  },
};
</script>
<style scoped>
table {
  border-collapse: collapse; /* 合并边框，使其一致 */
  width: 100%;
}
table,
th,
td {
  border: 1px solid gainsboro; /* 设置边框的样式 */
  padding: 8px; /* 可选：设置单元格的内边距 */
}
td {
  text-align: center; /* 水平居中对齐 */
  vertical-align: middle; /* 垂直居中对齐 */
}
#styled-table2 tr:first-child {
  background-color: ghostwhite;
}

#styled-table td:nth-child(1),
#styled-table td:nth-child(3) {
  background-color: ghostwhite;
}
</style>
